<template>
	<view class="box">
		<!-- 标题 -->
		<view class="navbar">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :autoBack="true" :bgColor="bgColor">
				<view slot="center" class="title-with-icon">
					沟通宝
					<u-icon name="scan" size="28" @click="checkAllRead"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 内容 -->
		<view class="container">
			<view class="chat-container">
				<view class="chat-message" v-for="(message, index) in messages" :key="index" @click="goToChat(message)">
					<view class="chat-avatar-container">
						<image class="chat-avatar" :src="message.avatar" mode="aspectFill"></image>
						<view v-if="!message.isRead" class="unread-badge">未读</view>
					</view>
					<view class="chat-content" @click="xt()">
						<view class="chat-header">
							<text class="chat-name">{{ message.name }}</text>
							<text class="chat-time">{{ message.time }}</text>
						</view>
						<view class="chat-body">
							<text class="chat-text">{{ message.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="sacc">
	export default {
		data() {
			return {
				bgColor: 'rgb(232, 252, 250)',
				isRead: false,
				messages: [{
						avatar: 'https://via.placeholder.com/50', // 用户头像URL
						name: '张三',
						time: '10:30',
						text: '你好，最近怎么样？',
						isRead: false
					},
					{
						avatar: 'https://via.placeholder.com/50', // 用户头像URL
						name: '李四',
						time: '10:35',
						text: '挺好的，你呢？',
						isRead: false
					},
					{
						avatar: 'https://via.placeholder.com/50', // 用户头像URL
						name: '系统消息',
						time: '10:35',
						text: '用车审批通过',
						isRead: false
					},
				]
			};
		},
		methods: {
			xt(){
				uni.navigateTo({
					url:"/pages/map/map"
				})
			},
			checkAllRead() {
				this.messages.forEach(message => {
					message.isRead = true;
				});
				uni.showToast({
					title: '全部已读',
					icon: 'none'
				});
			},
			goToChat(message) {
				uni.navigateTo({
					url: `/pages/chat/chat?avatar=${encodeURIComponent(message.avatar)}&name=${encodeURIComponent(message.name)}`
				});
			},
		}
	}
</script>

<style lang="scss">
	.box {
		.navbar {
			height: 50px;
			font-size: 16px;
			font-weight: bold;

			.title-with-icon {
				display: flex;
				align-items: center;
			}
		}

		.container {
			.chat-container {
				padding: 10px;
			}

			.chat-message {
				display: flex;
				margin-bottom: 25px;
				// border-bottom: 1px solid gray;
			}

			.chat-avatar {
				width: 50px;
				height: 50px;
				border-radius: 5px;
				margin-right: 10px;
				border-radius: 50%;
			}

			.chat-content {
				flex: 1;
			}

			.chat-header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
			}

			.chat-name {
				font-size: 16px;
				font-weight: bold;
			}

			.chat-time {
				font-size: 12px;
				color: #666;
			}

			.chat-body {
				background-color: #f3f3f3;
				border-radius: 5px;
				padding: 8px;
			}

			.chat-text {
				font-size: 14px;
			}

			.chat-avatar-container {
				position: relative;
			}

			.unread-badge {
				position: absolute;
				top: -5px;
				right: -5px;
				background-color: red;
				color: white;
				border-radius: 10px;
				padding: 2px 6px;
				font-size: 12px;
			}

			.title-with-icon {
				display: flex;
				align-items: center;
			}

			.title-with-icon .u-icon {
				margin-left: 8px;
				/* 图标与文字的间距 */
			}
		}
	}
</style>